@extends('layouts.appDomain')

@section('style')
    <link rel="stylesheet" href="/temp/a/animate.min.css">
    <link rel="stylesheet" href="/temp/a/templatemo-style.css">
    <style>


        #background_video {
            position: fixed;

            top: 50%; left: 50%;
            transform: translate(-50%, -50%);

            object-fit: cover;
            height: 100%; width: 100%;
        }

        #video_cover {
            position: fixed;
            width: 100%; height: 100%;
            background-size: cover;
            background-position: center;
        }

        @media (min-width: 768px) {
            #video_controls {
                display: none;
            }
        }

        /* Demo page specific styles */



        #overlay {
            position: fixed;
            top: 0; right: 0; left: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
        }


        #links a {
            border: 2px solid rgba(255,255,255,0.20);
            border-radius: 61px;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 1px;
            text-decoration: none;
            text-transform: uppercase;
            padding: 10px 25px;
            display: inline-block;
            margin-right: 15px;
        }

        .btn.btn-default{
            border: #ccc solid 1px !important;
        }

    </style>
@endsection

@section('content')

    <div id="container">
        <video id="background_video" loop="" muted=""><source src="/temp/a/bg.mp4" type="video/mp4"></video>
        <div id="video_cover" style="display: none;"></div>
        <div id="overlay"></div>
    </div>

    <script src="/temp/a/bideo.js"></script>
    <script src="/temp/a/main.js"></script>

    <section id="home">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-2 col-md-8">
                    <h1 class="wow" ><span>{{ $server->name }}</span></h1>

                    <div class="element" style="height: auto;">
                        QQ群：{{$server->qq_group}} <br>
                        @if($server->qq_server)
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin={{$server->qq_server}}&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:{{$server->qq_server}}:42" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
                        @endif
                    </div>
                    <div class="element mt-3" style="height: auto;">{!! str_replace("\n","<br>",str_replace("\r\n","<br>",$server->info))??'一切尽在游戏中' !!}</div>

                    <div class="btns">
                        <a class="btn btn-default wow fadeInUp animated dlq" data-wow-offset="50" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;" href="{{ url($server->getLauncherUrl()) }}" target="_blank">登录器下载</a>
                        @if(!session('player'))
                            <a class="btn btn-default wow fadeInUp animated zc" data-wow-offset="50" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;" href="{{ url('register') }}">注册</a>
                            <a class="btn btn-default wow fadeInUp animated dl" data-wow-offset="50" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInUp;" href="{{ url('login') }}">登录</a>
                        @endif
                    </div>

                    <div class="fadeInUp animated mt-5 downloads" data-wow-offset="50" data-wow-delay="0.9s" style="visibility: visible; animation-delay: 0.9s;animation-name: fadeInUp;">
                        <a href="https://www.123pan.com/s/OJqRVv-V0xH.html" target="_blank" style="color: white">1. 魔兽世界3.35客户端下载</a><br>
{{--                        <a href="{{ url('/Wow.exe') }}" target="_blank" style="color: white">2. 12340版EXE文件，下载覆盖</a><br>--}}
                        <a href="{{ url('/魔兽世界3.35大脚插件.rar') }}" target="_blank" style="color: white">3. 魔兽世界3.35大脚插件</a>
                    </div>

                </div>
            </div>
        </div>
    </section>

@endsection
